<script setup>

import { onMounted, ref } from 'vue'
import { challengeUserBoxBags } from '@/api/chest/chest.js'
import UserInfo from '@/components/UserInfo.vue'
const searchValue = ref('')
const is_finish = ref('')
const page = ref(1)
const refreshing = ref(false)
const loading = ref(false)
const lastPage = ref(0)
const total = ref(0)
const challengeUserBoxBagsLisrt = ref([0])
const vipType = ref('')
const typeList = [
  { value: '', text: '全部' },
  { value: 0, text: '未开' },
  { value: 1, text: '已开' }
]

onMounted(() => {
    refreshing.value = true
    getchallengeUserBoxBags()
})
const onSearch = () => {
    onRefresh()
}
const onRefresh = () => {
    refreshing.value = true
    page.value = 1
    lastPage.value = 1
    getchallengeUserBoxBags()
}
const getchallengeUserBoxBags = async () => {
    loading.value = true
    try {
        const result = await challengeUserBoxBags(
            {
                page: page.value,
                user_id: searchValue.value,
                is_finish: vipType.value
            }
        )
        if (result.code === 200) {
            if (page.value === 1) {
                challengeUserBoxBagsLisrt.value = result.data.data
            } else {
                challengeUserBoxBagsLisrt.value.push(...result.data.data)
            }
            page.value++
            total.value = result.data.total
            lastPage.value = result.data.last_page
        }
    } catch (e) {
        console.log(e)
    } finally {
        refreshing.value = false
        loading.value = false
    }
}

const onLoadMore = () => {
    getchallengeUserBoxBags()
}
</script>

<template>
    <div class="white-container">
        <form class="search-form">
            <van-search v-model="searchValue" show-action clearable placeholder="请输入用户id" @search="onSearch"
                clear-trigger="always">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </form>

        <van-dropdown-menu>
      <van-dropdown-item @change="onRefresh" v-model="vipType" :options="typeList" />
    </van-dropdown-menu>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="page > lastPage" finished-text="没有更多了" @load="onLoadMore">
                <div class="white-item" v-for="item in challengeUserBoxBagsLisrt" :key="item.id">
                    <UserInfo :avatar="item.avatar" :nickname="item.nickname" :id="item.user_id"></UserInfo>
                    <UserInfo :avatar="item.box_image" :nickname="item.box_name" ></UserInfo>
                    <UserInfo :avatar="item.draw_image" :nickname="item.draw_name" :id="item.id"></UserInfo>
                    <div>
                        <span :style="{ color: item.is_finish == 0 ? 'red' : 'black' }">{{ item.is_finish == 0 ? '否' : '是' }}</span>
                    </div>
                    <!-- <van-switch @change="changeStatus(item)" :model-value="item.status === 1" /> -->
                </div>
            </van-list>
            <van-back-top bottom="10vh" />
        </van-pull-refresh>
    </div>
</template>

<style scoped lang="less">
/deep/.user-info {
    flex: 0 !important;
}

.white-container {
    .white-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }
}
</style>